<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dive Into HTML5</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  <script src="modernizr-2.0.6.js"></script>
  
  <script type="text/javascript">

	function init() {
		var msg = "<div><span style='font-size: 15px;'><b>CSS3</b></span><hr>";
		msg += "<table>";
<?php
$css_arr = array("fontface", "backgroundsize", "borderimage", "borderradius", "boxshadow", "flexbox", "hsla", "multiplebgs", "opacity", "rgba", "textshadow", "cssanimations", "csscolumns"					, "cssgradients", "cssreflections", "csstransforms", "csstransforms3d", "csstransitions");
$n_css = count($css_arr);
for ($i = 0; $i < $n_css; $i++) {
$css_feature = $css_arr[$i];
echo <<< HERE
		if (Modernizr.$css_feature) {
			msg += "<tr><td>$css_feature:</td> <td>Y</td></tr>";
		} else {
			msg += "<tr><td>$css_feature:</td> <td>N</td></tr>";
		}
HERE;
}
?>
		msg += "</table>";
		msg += "<br/><span style='font-size:15px;'><b>HTML5 Features</b></span><hr>";
		msg += "<table>";
<?php
$html_arr = array("applicationcache", "canvas", "canvastext", "draganddrop", "hashchange", "history", "audio", "video", "indexeddb", "localstorage", "postmessage", "sessionstorage" 					, "websockets", "websqldatabase", "webworkers");
$n_html = count($html_arr);
foreach ($html_arr as $value) {
echo <<< HERE
		if (Modernizr.$value) {
			msg += "<tr><td>$value:</td> <td>Y</td></tr>";
		} else {
			msg += "<tr><td>$value:</td> <td>N</td></tr>";
		}
HERE;
}
?>
		msg += "</table>";
		msg += "<br/><span style='font-size: 15px'><b>Miscellaneous</b></span><hr>";
		msg += "<table>";
<?php
$misc_arr = array("geolocation", "inlinesvg", "smil", "svg", "svgclippaths", "touch", "webgl");
$n_misc = count($misc_arr);
foreach ($misc_arr as $value) {
echo <<< HERE
		if (Modernizr.$value) {
			msg += "<tr><td>$value:</td> <td>Y</td></tr>";
		} else {
			msg += "<tr><td>$value:</td> <td>N</td></tr>";
		}
HERE;
}
?>			
		msg += "</div>";
		var content = document.getElementById("content");
		var oDiv = document.createElement('div');
		oDiv.innerHTML = msg;
		
		content.appendChild(oDiv);
	}
  </script>
  
</head>
<body onload="init()">
<div id="content"></div>
</body>
</html>